<template>
  <div class="detail-page">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      fixed
      right-text="分享"
      @click-right="showShare = true"
    />
    <header class="header">
      <h1>{{ details.title }}</h1>
      <div class="headerBox">
        {{ details.pubdate }} | {{ details.read_count }} 浏览量 | {{ details.comm_count }} 评论
      </div>
      <div class="headerBox">
        <div class="headerBox">
          <img :src="details.aut_photo" alt="" />
          <span class="aut_name">{{ details.aut_name }}</span>
        </div>
        <van-button  class="mini-button" round type="info" size="small">
          <span>+&nbsp; 关注</span>
        </van-button>
      </div>
    </header>
    <main class="body">
      <p v-html=" details.content " ></p>
      <!-- <p>我是内容</p>
      <p>我是内容</p>
      <p>我是内容</p> -->
    </main>

    <div class="footer van-hairline--top">
      <div class="input">
        <van-field v-model="value" left-icon="edit" placeholder="黑子请开始你的表演" @click="show = true"/>
      </div>
      <div class="btn"><van-icon @click="show = true" name="chat-o"></van-icon><p>评论</p><i class="iii">{{ details.comm_count }}</i></div>
      <div class="btn"><van-icon @click="give" :name="details.attitude === 1 ? 'good-job-o' : 'good-job'"></van-icon><p>点赞</p></div>
      <div class="btn"><van-icon @click="coll" :name="details.is_collected ? 'like' : 'like-o' "></van-icon><p>收藏</p></div>
      <div class="btn"><van-icon @click="showShare = true" class="van-icon" name="share-o"></van-icon><p>分享</p></div>
    </div>
    <van-popup v-model="show" position="top" :style="{ height: '100%' }">
      <van-nav-bar
        title="评论文章"
        right-text="发表"
        left-arrow
        @click-left="show = false"
      />
      <van-field
        v-model="value"
        type="textarea"
        placeholder="请开始你的狗叫"
      />
    </van-popup>

    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />

    <ArticleComment :details="details" :id="$route.params.id"></ArticleComment>
  </div>
</template>

<script>
import { collAuthor, detailList, followAuthor, likeArticle } from '@/api/user'
import ArticleComment from '@/components/ArticleComment'

// import { Toast } from 'vant'
export default {
  components: { ArticleComment },
  // components: { ArticleComment },

  name: 'DetailPage',
  data () {
    return {
      show: false,
      value: '',
      details: {},
      showShare: false,
      target: this.$route.params.id,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  methods: {
    // 点赞
    async give () {
      if (this.details.attitude === 1) {
        await likeArticle(this.target, false)
        this.$toast.success('点赞成功')
        this.details.attitude = -1
      } else {
        await likeArticle(this.target, true)
        this.$toast.success('取消点赞')
        this.details.attitude = 1
      }
    },
    // 关注
    async foll () {
      const state = !this.details.is_followed
      console.log(state)
      await followAuthor(this.target, state)
      // if (err) return this.$toast.success('操作失败')
      this.$toast.success(state ? '关注成功' : '取消关注')
      this.details.is_followed = state
    },
    // 收藏
    async coll () {
      const state = !this.details.is_collected
      console.log(state)
      await collAuthor(this.target, state)
      // if (err) return this.$toast.success('操作失败')
      this.$toast.success(state ? '收藏成功' : '取消收藏')
      this.details.is_collected = state
    }
  },
  async created () {
    // console.log(this.$route.params.id)
    const res = await detailList(this.$route.params.id)
    console.log(res)
    this.details = res.data
  }
}
</script>

<style lang="less" scoped>
.detail-page {
  margin-top: 44px;
  overflow: hidden;
  padding: 0 15px;
  .header {
      margin-bottom: 30px;
      border-bottom: 1px solid #999;
    h1 {
      font-size: 24px;
    }
    .headerBox {
      color: #999;
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
      .aut_name{
        font-size: 16px;
        padding-left: 10px;
        color: #000;
      }
      .mini-button{
        margin:0 20px ;
      }
    }
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      max-width:100%;
    }
  }
  .opt {
    position: fixed;
    bottom: 100px;
    right: 0;
    > .van-icon {
      margin-right: 20px;
      background: #fff;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 50%;
      box-shadow: 2px 2px 10px #ccc;
      font-size: 18px;
      &.active {
        background: #FEC635;
        color: #fff;
      }
    }
  }
  .body {
    /deep/ img {
        max-width:100%;
        background: #f9f9f9;
      }
  }

}
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  background: #fff;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  z-index: 999;
  .input {
   margin-left: 10px;
   width: 200px;
   height: 34px;
   // background: @geek-gray-color;
  //  border-radius: 17px;
  //  line-height: 36px;
  //  padding-left: 10px;
  //  display: flex;
  //   background: #777;
   .van-icon {
    color: #999;
    line-height: 34px;
    margin-top: 5px;
   }
  //  .van-aa{
    //  }
  }
  .btn {
    flex: 1;
   text-align: center;
   position: relative;
   p {
     margin: 0;
    font-size: 10px;
   }
   .van-icon {
    font-size: 18px;
   }
   .iii {
     height: 16px;
    min-width: 16px;
    padding: 0 3px;
    color: #fff;
    font-size: 10px;
    position: absolute;
    right: 0;
    top: -4px;
    line-height: 16px;
    border-radius: 8px;
    font-style: normal;
   }
  }
 }
.van-field__control.aaa{
  background-color: #f2f3f5;
  resize: none;
  border-radius: 5px 5px 0 0;
  z-index: 2;
  margin-bottom: 10px;
}
</style>
